<template>
  <!-- 我的个人中心 -->
  <div class="bgc">
    <meHeader :userState="userState" :data="data" />
    <div class="info">
      <div>账户余额：{{ data.total ? data.total.toFixed(2) : "0.00" }}</div>
      <div>|</div>
      <div @click="goAddress">收货地址</div>
    </div>
    <div id="mainer">
      <!-- 拍品状态 -->
      <div class="productStatus">
        <div>
          <img src="/img/me/all.png" />
          <div>查看全部</div>
        </div>
        <div>
          <img src="/img/me/fahuo.png" />
          <div>待发货</div>
        </div>
        <div>
          <img src="/img/me/yunshu.png" />
          <div>运输中</div>
        </div>
        <div>
          <img src="/img/me/wait.png" />
          <div>待收货</div>
        </div>
        <div>
          <img src="/img/me/yiqianshou.png" />
          <div>已签收</div>
        </div>
      </div>
      <!-- 按钮菜单 -->
      <div id="menu">
        <van-cell :clickable="false" title="我的收藏" is-link>
          <img src="/img/me/stared.png" slot="icon" />
        </van-cell>
        <van-cell :clickable="false" @click="goKefu" title="联系客服" is-link>
          <img src="/img/me/kefu.png" slot="icon" />
        </van-cell>
        <van-cell
          @click="goUcenter"
          :clickable="false"
          :border="false"
          title="设置"
          is-link
        >
          <img src="/img/me/seting.png" slot="icon" />
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import MeHeader from "@/components/Meheader.vue";
import { Dialog } from "vant";
export default {
  data() {
    return {
      userState: "", //存储用户的token
      data: {}, //用户信息
    };
  },
  components: { MeHeader },
  methods: {
    getData() {
      const url = "api/users/info";
      return new Promise((resolve, reject) => {
        this.axios
          .get(url, { headers: { usertoken: this.userState } })
          .then((res) => resolve(res.data))
          .catch((err) => reject(err));
      });
    },
    goAddress(){
      // 已登录
      if(this.userState){
        this.$router.push(`/address/show_address/${this.data.sid}`)
      }else {
        this.$dialog.alert({
          message:'你还未登录',
          confirmButtonColor: "#9a4145",
          confirmButtonText:'好的'
        })
      }
    },
    goKefu() {
      // 未登录
      if (!this.userState) {
        Dialog.alert({
          message: "你尚未登录，不能联系客服",
          confirmButtonColor: "#9a4145",
        });
        return;
      }
      this.$router.push(
        `/kefu?sname=${this.data.sname}&avatar=${this.data.avatar}`
      );
    },
    // 点击设置时触发
    goUcenter() {
      // 未登录
      if (!this.userState) {
        // 弹窗
        Dialog.alert({
          message: "你尚未登录，请登录后重试",
          confirmButtonColor: "#9a4145",
          confirmButtonText: "去登录",
          showCancelButton: true,
        })
          .then(() => {
            // 单击去登录按钮
            this.$router.push("/login");
          })
          .catch(() => {
            // 单击已取消按钮
            return;
          });
        return;
      }
      // 已登录
      this.$router.push(`/base_user`);
    },
  },
  mounted() {
    this.userState = sessionStorage.getItem("token");
    // 已登录
    if (this.userState) {
      if (sessionStorage.getItem("user")) {
        this.data = JSON.parse(sessionStorage.getItem("user"));
      } else {
        this.getData().then((res) => {
          sessionStorage.setItem("user", JSON.stringify(res.info));
          this.data = res.info;
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.bgc {
  background-color: #efefef;
  height: 90vh;
}
.info {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  background-color: #fff;
  > div {
    text-align: center;
    padding: 1.25em 0;
    &:nth-child(even) {
      color: #ebebeb;
    }
    &:nth-child(odd) {
      flex: 1;
    }
  }
}
#mainer {
  background-color: #f5f5f5;
  .productStatus {
    background-color: #fff;
    margin-top: 0.615em;
    display: flex;
    align-items: flex-end;
    > div {
      padding: 0.615em 0;
      img {
        width: 30%;
        padding-bottom: 0.315em;
      }
      flex: 1;
      font-size: 0.9em;
      text-align: center;
    }
  }
  #menu {
    margin-top: 0.615em;
    .van-cell {
      align-items: center;
      padding: 0.44em 0.69em;
      margin-top: 0.615em;
      .van-cell__title {
        padding-left: 0.615em;
      }
      .van-icon-arrow:before {
        content: "";
      }
      img {
        width: 1.7em;
      }
    }
  }
}
</style>